<template>
	<view class="coupon-selector">
		<!-- 优惠券选择弹窗 -->
		<u-popup :show="visible" mode="bottom" border-radius="24" @close="close">
			<view class="popup-content">
				<view class="popup-header">
					<text class="title">选择优惠券</text>
					<u-icon name="close" @click="close" size="22"></u-icon>
				</view>

				<!-- 优惠券列表 -->
				<scroll-view scroll-y class="coupon-list">
					<template v-if="couponList.length > 0">
						<view class="coupon-item" v-for="(item, index) in couponList" :key="item.id" @click="selectCoupon(item)">
							<view class="left flex">
								<view class="amount">
									<text class="value">{{ parseInt(item.discountPrice / 100) }}</text>
								</view>
								<text class="desc">满{{ parseInt(item.usePrice / 100) }}可用</text>
							</view>
							<view class="right">
								<text class="title">{{item.name}}</text>
								<view class="flex rules-row">
									<view class="flex" style="align-items: center;">
										<text class="rules">有效期: {{formatDate(item.validStartTime)}} - {{formatDate(item.validEndTime)}}</text>
										<u-icon name="arrow-right" color="#868686" size="22rpx"></u-icon>
									</view>
								</view>
							</view>
							<!-- 选中标记 -->
							<view class="check-mark" v-if="selectedId === item.id">
								<u-icon name="checkmark" color="#42E0A2" size="32"></u-icon>
							</view>
						</view>
					</template>

					<view v-else class="empty-state">
						<u-empty mode="coupon" text="暂无可用优惠券"></u-empty>
					</view>
				</scroll-view>

				<!-- 底部按钮 -->
				<view class="popup-footer">
					<u-button type="primary" @click="confirm">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'CouponSelector',
		props: {
			// 订单金额
			orderAmount: {
				type: Number,
				default: 0
			},
			// 可选的优惠券列表
			coupons: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				visible: false,
				couponList: [],
				selectedId: null,
				loading: false
			}
		},
		watch: {
			coupons: {
				immediate: true,
				handler(val) {
					if (val && val.length > 0) {
						this.couponList = val
					}
				}
			}
		},
		methods: {
			// 显示选择器
			show() {
				this.visible = true
				// 如果没有传入优惠券列表，则请求接口获取
				if (!this.coupons.length) {
					this.getCouponList()
				}
			},

			// 关闭选择器
			close() {
				this.visible = false
				this.selectedId = null
			},

			// 获取可用优惠券列表
			getCouponList() {
				if (this.loading) return

				this.loading = true
				this.$http_api.couponList({ status: 1, pageNo: 1, pageSize: 999 }).then(res => {
					this.couponList = (res.list || []).filter(coupon => {
						return parseFloat(this.orderAmount) >= parseFloat(coupon.usePrice)
					})
				}).finally(() => {
					this.loading = false
				})
			},

			// 格式化日期
			formatDate(timestamp) {
				var da = new Date(timestamp);
				var year = da.getFullYear();
				var month = da.getMonth()+1;
				var date = da.getDate();
			    return [year,month,date].join('/')
			},
			// 选择优惠券
			selectCoupon(coupon) {
				this.selectedId = this.selectedId === coupon.id ? null : coupon.id
			},

			// 显示使用规则
			showRules(coupon) {
				uni.showModal({
					title: '使用规则',
					content: coupon.description,
					showCancel: false
				})
			},

			// 确认选择
			confirm() {
				const selectedCoupon = this.couponList.find(item => item.id === this.selectedId)
				this.$emit('select', selectedCoupon || null)
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-selector {
		.popup-content {
			min-height: 60vh;
			max-height: 90vh;
			background: #F6FAFF;
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			background: #fff;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.coupon-list {
			padding: 20rpx;
			max-height: 600rpx;
			width: calc(100vw - 40rpx);

			.coupon-item {
				display: flex;
				background: #fff;
				border-radius: 24rpx;
				margin-bottom: 20rpx;
				position: relative;

				.left {
					flex-direction: column;
					justify-content: center;
					width: 200rpx;
					height: 180rpx;
					background: linear-gradient(140deg, #1C6EFB, #02D9C3);
					position: relative;
					border-top-left-radius: 24rpx;
					border-bottom-left-radius: 24rpx;

					.amount {
						display: flex;
						align-items: baseline;

						.value {
							font-size: 80rpx;
							color: #fff;
							font-weight: 600;
						}
					}

					.desc {
						font-size: 24rpx;
						color: #fff;
					}
				}

				.right {
					flex: 1;
					padding: 20rpx 30rpx;

					.title {
						font-size: 32rpx;
						color: #333;
						font-weight: 600;
					}

					.date {
						font-size: 24rpx;
						color: #999;
						margin: 10rpx 0;
					}

					.rules-row {
						margin-top: 10rpx;
					}

					.rules {
						font-size: 24rpx;
						color: #999;
					}
				}

				.check-mark {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.popup-footer {
			padding: 20rpx 40rpx;
			background: #fff;
		}

		.empty-state {
			padding: 100rpx 0;
			display: flex;
			justify-content: center;
		}
	}
</style>